<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width: 100%;height: 500px;"></div>
		<script type="text/javascript">
			var chartDom = document.getElementById('main');
			var myChart = echarts.init(chartDom);
			var option = {
				title: {
					text: '世界人口'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				itemStyle: {
					borderRadius: 20
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口']
				},
				series: [{
						name: '2021',
						type: 'bar',
						data: [18203, 23489, 29034, 104970, 131744, 630230]
					},
					{
						name: '2022',
						type: 'bar',
						data: [19325, 23438, 31000, 121594, 134141, 681807]
					}
				]
			};
			myChart.setOption(option);
		</script>
	</body>
</html>
